// 分享抽奖活动
import { getTimeBeginEnd, getPicFullPath } from '../../../common/utils';
import { getSysInfo } from '../../../common/env';
import { COS_CONF, NUMERAL_ZH } from '../../../constants/common';
import { APPNAME } from '../../../config';

const _wh = (num) => {
    const { windowWidth = 1 } = getSysInfo();
    return num * (windowWidth / 375);
};

const _size = (info) => {
    let width = _wh(343);
    let height = _wh(286);
    let bodyHeight = _wh(54);
    let products = info.activityProductWithAttributeDefAndSkus || info.activityProductWithSkus;
    products.forEach((v, i) => {
        if (i < 2) {
            bodyHeight += _wh(120);
        }
    });
    height += bodyHeight;
    return { width, height, bodyHeight };
};

const _render = (list) => {
    let _html = '';
    list.forEach((v, i) => {
        if (i < 2) {
            const maximum = v.skus.some(s => s.maximum <= 0) ? '' : v.skus.reduce((s, c) => s + parseFloat(c.maximum <= 0 ? 0 : c.maximum), 0);
            const picUrl = getPicFullPath(v.productPics[0] || COS_CONF.defaultPic) + COS_CONF.detailParam;
            _html += `
                <view class="bd-item">
                    <image class="bdi-pic" src="${picUrl}" />
                    <view class="bdi-info">
                        <view><text class="bdi-name">${v.productName.length > 18 ? v.productName.substring(0, 18) + '...' : v.productName}</text></view>
                        <view><text class="bdi-desc">数量：${maximum ? maximum : '不限'}</text></view>
                        <view class="bdi-rank">${NUMERAL_ZH[i + 1]}等奖</view>
                    </view>
                </view>
            `;
        }
    });
    if (list.length > 2) {
        _html += `
            <text class="bd-more">扫码查看剩余奖品 ></text>
        `;
    }
    return _html;
};

const createWxml = (info, qrcode) => {
    let products = info.activityProductWithAttributeDefAndSkus || info.activityProductWithSkus;
    return `
        <view class="container">
            <view class="header">
                <image class="hd-avatar" src="${getPicFullPath(info.ownerPic && info.ownerPic !== '头像1' ? info.ownerPic : COS_CONF.defaultPic)}" />
                <view><text class="hd-name">${info.ownerName}</text></view>
                <view><text class="hd-desc">${info.ownerIntro || ''}</text></view>
            </view>
            <view class="line"></view>
            <view class="line"></view>
            <view class="body">
                <view><text class="bd-name">${info.name.length > 18 ? info.name.substring(0, 18) + '...' : info.name}</text></view>
                <view><text class="bd-date">${getTimeBeginEnd(info.begined, info.ended)}</text></view>
                ${_render(products)}
            </view>
            <view class="line"></view>
            <view class="line"></view>
            <view class="footer">
                <view>
                    <text class="ft-name">${APPNAME}</text>
                    <text class="ft-guide">长按识别小程序码，一起抢购 ></text>
                </view>
                <image class="ft-qrcode" src="${qrcode}" />
            </view>
        </view>
    `;
};

const createStyle = (info) => {
    const { width, height, bodyHeight } = _size(info);
    return {
        container: {
            width,
            height,
            padding: _wh(12),
            backgroundColor: '#ffffff',
            lineHeight: 1.4,
            verticalAlign: 'middle',
        },
        line: {
            width: _wh(319),
            height: _wh(1),
            marginTop: _wh(1),
            backgroundColor: '#E5E5E5',
        },
        header: {
            width: _wh(319),
            height: _wh(105),
            marginBottom: _wh(15),
            flexDirection: 'column',
            alignItems: 'center',
        },
        hdAvatar: {
            width: _wh(52),
            height: _wh(52),
            marginTop: _wh(10),
            borderRadius: 8,
            backgroundColor: '#cccccc',
        },
        hdName: {
            width: _wh(319),
            height: _wh(16),
            marginTop: _wh(6),
            fontSize: 16,
            color: '#333333',
            textAlign: 'center',
        },
        hdDesc: {
            width: _wh(319),
            height: _wh(13),
            marginTop: _wh(8),
            fontSize: 13,
            color: '#999999',
            textAlign: 'center',
        },
        body: {
            position: 'relative',
            width: _wh(319),
            height: bodyHeight,
            marginBottom: _wh(8),
        },
        bdName: {
            width: _wh(319),
            height: _wh(18),
            marginTop: _wh(8),
            fontSize: 18,
            color: '#3B434B',
        },
        bdDate: {
            width: _wh(319),
            height: _wh(12),
            marginTop: _wh(8),
            fontSize: 12,
            color: '#878891',
        },
        bdItem: {
            width: _wh(319),
            height: _wh(100),
            marginTop: _wh(12),
            marginBottom: _wh(8),
            flexDirection: 'row',
        },
        bdiPic: {
            width: _wh(100),
            height: _wh(100),
            marginRight: _wh(8),
            borderRadius: 6,
            borderWidth: 1,
            backgroundColor: '#cccccc',
        },
        bdiInfo: {
            position: 'relative',
            width: _wh(211),
            height: _wh(100),
        },
        bdiName: {
            width: _wh(211),
            height: _wh(14),
            fontSize: 14,
            color: '#3B434B',
            justifyContent: 'flex-start',
        },
        bdiDesc: {
            width: _wh(211),
            height: _wh(12),
            marginTop: _wh(8),
            fontSize: 12,
            color: '#878891',
        },
        bdiRank: {
            position: 'absolute',
            left: 0,
            bottom: _wh(8),
            width: _wh(211),
            height: _wh(18),
            flexDirection: 'row',
            alignItems: 'center',
            fontSize: 18,
            color: '#16BC52',
        },
        bdMore: {
            position: 'absolute',
            bottom: _wh(2),
            width: _wh(319),
            height: _wh(12),
            fontSize: 12,
            color: '#16BC52',
            textAlign: 'center',
        },
        footer: {
            width: _wh(319),
            height: _wh(80),
            marginTop: _wh(16),
            marginBottom: _wh(4),
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
        },
        ftName: {
            width: _wh(209),
            height: _wh(25),
            fontSize: 18,
            color: '#000000',
        },
        ftGuide: {
            width: _wh(209),
            height: _wh(14),
            marginTop: _wh(8),
            fontSize: 12,
            color: '#878891',
        },
        ftQrcode: {
            width: _wh(80),
            height: _wh(80),
        },
    };
};

const createSize = _size;

module.exports = {
    createWxml,
    createStyle,
    createSize,
};
